<template>
  <div class="app-container">
    <!-- 登录界面 -->
    <LoginForm
      v-if="!isLoggedIn"
      @login="handleLogin"
    />

    <!-- 聊天界面 -->
    <ChatRoom
      v-else
      :username="username"
      :userId="userId"
      @logout="handleLogout"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import LoginForm from './components/LoginForm.vue'
import ChatRoom from './components/ChatRoom.vue'

const isLoggedIn = ref(false)
const username = ref('')
const userId = ref('')

const handleLogin = (name) => {
  username.value = name
  userId.value = Date.now().toString()
  isLoggedIn.value = true
}

const handleLogout = () => {
  isLoggedIn.value = false
  username.value = ''
  userId.value = ''
}
</script>

<style scoped>
.app-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
